import React, { Component,PropTypes} from 'react';
import CommonBtn from '../../Component/CommonComponent/CommonBtn'
import {BandBank} from '../../Action/auth';
import {ErrorNum,specialChar,IDnumTest} from '../../Action/rpc'
import Top from '../CommonComponent/Top'

export default class BankInformation extends Component {
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            Reminder:'',
            bankName:'',
            name:'',
            bankCardNo:'',
            pro:'',
            city:'',
            area:'',
            branch:'',
            mobile:'',
            changeNum:'',
            IDnum:''
        };
          this.click=true;
      }
    static contextTypes = {
        router:PropTypes.object
    }
    //绑定银行卡
    async BandCard() {
        if(this.click){
            this.click=false;
            const {bankName,name,bankCardNo,pro,city,area,branch,mobile,IDnum} = this.state
            if(bankName ==''||name == ''||pro==''||city==''||area==''||branch==''||IDnum==''){
                this.setState({Reminder:'信息请填写完整哦'})
                this.click=true;
                return
            }
            if (!ErrorNum(mobile)) {
                this.setState({Reminder:'手机号码有误,请重新填写'})
                return
            }

            if (!specialChar(bankCardNo)) {
                this.setState({Reminder:'银行卡号码有误,请重新填写'})
                return
            }

            if (!IDnumTest(IDnum)) {
                this.setState({Reminder:'身份证号有误,请重新填写'})
                return
            }

            await BandBank(bankName,name,bankCardNo,pro,city,area,branch,mobile,IDnum)
                .then(res=>{
                    if(this.props.location.query.type==1){
                        this.context.router.push({pathname:'/myBankList'})
                    }else if(this.props.location.query.type==2){
                        const tranType = this.props.location.query.tranType;
                        const purchase = this.props.location.query.purchase;
                        const total = this.props.location.query.total;
                        const grade = this.props.location.query.grade;
                        //判断是否为代理充值
                        const isRecharge = this.props.location.query.isRecharge;
                        const judgeup = this.props.location.query.judgeup==0?0:'';
                        this.context.router.push({pathname:'/toRecharge',
                            query:{tranType:tranType,total:total,grade:grade,isRecharge:isRecharge==2?2:'',
                                purchase:purchase==2?2:0,judgeup:judgeup}})
                    }else{
                        this.context.router.push({pathname:'/commissionCash'})
                    }
                })
                .catch(err=>{
                    this.click=true;
                    console.warn('err',err)
                })
        }
    }
    //判断手机号是否正确
    isRight(value,param){
        if(param === 'mobile'){
            if (!ErrorNum(value)) {
                this.setState({Reminder:'手机号码有误,请重新填写'})
            }else{
                this.setState({Reminder:''})
            }
        }
        if(param === 'bankcardNo'){
            if (!specialChar(value)) {
                this.setState({Reminder:'银行卡号码有误,请重新填写'})
            }else{
                this.setState({Reminder:''})
            }
        }
    }

    //校验身份证号是否正确
    isTestId(value){
        if (!IDnumTest(value)) {
            this.setState({Reminder:'身份证号有误,请重新填写'})
        }else {
            this.setState({Reminder: ''})
        }
    }
    isNum(param){
        if(param === 'mobile'){
            let tel = this.refs.mobile.value;
            let telNum = tel.replace(/[^0-9]/ig,"");
            if((/[^0-9]/ig).test(tel)){
                this.refs.mobile.value=telNum
            }
            this.setState({mobile:this.refs.mobile.value})
        }
        if(param === 'bankcardNo'){
            let bank = this.refs.bankCardNo.value;
            let bankNum = bank.replace(/[^0-9]/ig,"");
            if((/[^0-9]/ig).test(bank)){
                this.refs.bankCardNo.value=bankNum
            }
            this.setState({bankCardNo:this.refs.bankCardNo.value})
        }
    }

    render() {
        return (
            <div>
                <Top
                    title ={'添加银行卡'}
                />
                <div className="containerNav pb1" style={{top:50}}>
                    <div className="wrap">
                        <ul>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">开户姓名</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="name"
                                                onChange={()=>this.setState({name:this.refs.name.value})}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">身份证号</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="IDnum"
                                                onChange={()=>this.setState({IDnum:this.refs.IDnum.value})}
                                                onBlur={()=>this.isTestId(this.state.IDnum)}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">联系电话</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="mobile"
                                                onChange={()=>this.isNum('mobile')}
                                                onBlur={()=>this.isRight(this.state.mobile,'mobile')}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">银行账号</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="bankCardNo"
                                                onChange={()=>this.isNum('bankcardNo')}
                                                onBlur={()=>this.isRight(this.state.bankCardNo,'bankcardNo')}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">开户银行</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="bankName"
                                                onChange={()=>this.setState({bankName:this.refs.bankName.value})}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">省份</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="pro"
                                                onChange={()=>this.setState({pro:this.refs.pro.value})}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">城市</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="city"
                                                onChange={()=>this.setState({city:this.refs.city.value})}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">区县</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="area"
                                                onChange={()=>this.setState({area:this.refs.area.value})}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style={{height:50}} className="flex flex-align-center flex-pack-justify border_bottom plr f14">
                                    <div className="fl color6">开户支行</div>
                                    <div className="fr f12 color9 tr">
                                        <span>
                                            <input
                                                className="tr borderno"
                                                type="text"
                                                placeholder="编辑"
                                                ref="branch"
                                                onChange={()=>this.setState({branch:this.refs.branch.value})}
                                            />
                                        </span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        {/*<div className="userHeight border_bottom plr f14 colorlv">
                            请写明:姓名+XX银行XX省XX市XX分行XX支行
                        </div>*/}
                        <div className="tc f12 colorRed width100 plr loginHeight">
                            {this.state.Reminder}
                        </div>
                        <div className="plr" style={{marginBottom:20}}>
                            <button
                                className="bank_height border_4 colorfff bgk_lv width100 borderno"
                                onClick={()=>this.BandCard()}
                            >
                                确认
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
